<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<wicket:extend>

  <div class="container">
  <div class="span-12"><!-- left side -->
  <div class="span-4" style="text-align: left;">
  <h3 class="tight">Heater Usage</h3>
  </div>
  <div align="right" class="span-8 last" style="text-align: right;">
  <select>
    <option>Hourly</option>
    <option>Daily</option>
    <option>Monthly</option>
    <option>Yearly</option>
  </select></div>
  <fieldset><img wicket:id="water_pie_chart" /></fieldset>

  <!-- calculator -->
  <h3 class="tight">Calculate Savings</h3>
  <fieldset>
  <div class="span-8">
  <div class="span-8">Heater Wattage: <input type="text" /> <select>
    <option>Watts</option>
    <option>KiloWatts</option>
  </select></div>
  <div class="span-8">Rate of Cost: <input type="text" /> per kWh
  </div>
  </div>
  <div class="span-3 last" style="text-align: right"><input
    type="button" value="Calculate" /></div>
  <div class="span-6">Period Savings: <select>
    <option>Daily</option>
    <option>Monthly</option>
    <option>Yearly</option>
  </select></div>
  <div class="span-5 last" style="text-align: right;">$100.00</div>
  </fieldset>
  </div>

  <div class="span-12 last"><!-- right side -->
  <h3 class="span-8 tight">Heater Schedule</h3>
  <div class="span-4 last" style="text-align: right;">X: Enabled</div>
  <div class="span-12 last">
  <fieldset class="tight">
  <table>
    <thead>
      <tr>
        <th>Time</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
        <th>Weekdays</th>
        <th>Weekends</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align: center;">01:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">02:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">03:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">04:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">05:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">06:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">07:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">08:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">09:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">10:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">11:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">12:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
      </tr>
      <tr>
        <td style="text-align: center;">13:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
      </tr>
      <tr>
        <td style="text-align: center;">14:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">15:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">16:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
      </tr>
      <tr>
        <td style="text-align: center;">17:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">18:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
      </tr>
      <tr>
        <td style="text-align: center;">19:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">20:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
      </tr>
      <tr>
        <td style="text-align: center;">21:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">22:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">23:00</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
      <tr>
        <td style="text-align: center;">00:00</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;">X</td>
        <td style="text-align: center;"></td>
        <td style="text-align: center;"></td>
      </tr>
    </tbody>
  </table>
  </fieldset>
  </div>
  <div class="span-12 last" style="text-align: right"><input
    type="button" value="Submit" /></div>
  </div>
  </div>
</wicket:extend>
</html>

